<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>函数的封装</title>
</head>
<body>
<div></div>
<p></p>
<span></span>
<script>
    /*
    * 给下列的三种标签添加边框
    * 1.获取标签
    * 2.用document.getELementsByTagName获取的元素为一个伪数组
    *  get*by*返回的是一个DOM的伪数组
    *  什么是伪数组？？？
    *  所谓的伪数组，首先它不是一个数组，但是可以像数组一样遍历（for循环遍历）使用
    *  只需要满足：
    *  1）可以使用[index]来获得元素
    *  2）可以使用.length属性获得元素长度
    *  3）因此必须保证length是一个>=0的数字
    *  4）因此可以封装一个函数来实现伪数组的判断
    * */

    var divs = document.getElementsByName('divs');
    var ps = document.getElementsByName('p');
    for(var i=0;i<divs.length;i++){
            divs[i].style.border = '1px solid red';
    }
    for(var i = 0;i<ps.length;i++){
        ps[i].style.border = '2px solid orange';
    }
    //使用jQuery
    //$('div p').css();

    //优化
    /*
    * 1.将for循环封装成方法
    * function css(elems,styles){...}->undefined
    * 2.优化一下前面的函数
    *   function css(obj){...}
    *   obj:{elems:[],styles:{...}}
    * 3.应该将for循环封装成each或map的方法，这样就可以处理任意的遍历了。
    *
    * 优化一:
    *   现在是要封装库或者框架，这是一定要考虑通用性。
    * 优化二：
    *   使用qsa方法封装元素获取
    * */



   /* var div = document.querySelector('div');
    var p = document.querySelector('p');
    var span = document.querySelector('span');
    div.style.border = '1px solid red';
    div.style.width = '200px';
    div.style.height = '300px';
//    div.style.background_Color = 'orange';
    p.style.border = '2px solid orange';
    p.style.width = '200px';
    p.style.height = '200px';

    span.style.border = '3px solid blue';
    span.style.width = '200px';
    span.style.height = '150px';*/


    var divs = document.querySelectorAll('div');
    var ps = document.querySelectorAll('p');
    for(var i=0;i<divs.length;i++){
        divs[i].style.border = '1px solid red';
    }
    for(var i=0;i<ps.length;i++){
        ps[i].style.border = '2px solid blue';
    }
</script>
</body>
</html>